<template>
  <div class="home-page">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-carousel height="300px" v-loading="carouselLoading">
          <el-carousel-item v-for="item in carousels" :key="item.id">
            <div class="carousel-item" :style="{ backgroundImage: `url(${item.imageUrl})` }">
              <h3 v-if="!item.imageUrl">{{ item.title }}</h3>
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>

    <el-divider content-position="center">医院服务</el-divider>

    <el-row :gutter="20">
      <el-col :span="8" v-for="(service, index) in services" :key="index">
        <el-card class="service-card" shadow="hover">
          <div class="service-icon">
            <el-icon :size="40"><component :is="service.icon" /></el-icon>
          </div>
          <div class="service-title">{{ service.title }}</div>
          <div class="service-desc">{{ service.desc }}</div>
          <el-button type="primary" plain @click="goToService(service.route)">立即使用</el-button>
        </el-card>
      </el-col>
    </el-row>

    <el-divider content-position="center">最新公告</el-divider>

    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="never" v-loading="noticeLoading">
          <el-table :data="notices" style="width: 100%">
            <el-table-column prop="title" label="公告标题" width="180" />
            <el-table-column prop="publishTime" label="发布日期" width="180" />
            <el-table-column prop="content" label="公告内容">
              <template #default="scope">
                <div class="notice-content">{{ scope.row.content }}</div>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-button link type="primary" size="small" @click="viewNoticeDetail(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 公告详情对话框 -->
    <el-dialog v-model="noticeDetailVisible" :title="currentNotice?.title" width="60%">
      <div v-if="currentNotice" class="notice-detail">
        <div class="notice-info">
          <span>发布时间：{{ currentNotice.publishTime }}</span>
          <span>发布人：{{ currentNotice.publisher }}</span>
        </div>
        <div class="notice-content-full">{{ currentNotice.content }}</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Calendar, OfficeBuilding, ChatDotRound } from '@element-plus/icons-vue'
import { listCarousel } from '@/api/carousel'
import { listNotice, getNotice } from '@/api/notice'
import { ElMessage } from 'element-plus'

const router = useRouter()
const carouselLoading = ref(false)
const noticeLoading = ref(false)
const carousels = ref([])
const notices = ref([])
const noticeDetailVisible = ref(false)
const currentNotice = ref(null)

const services = ref([
  {
    icon: 'Calendar',
    title: '预约挂号',
    desc: '在线预约医生，无需排队等候',
    route: '/user/appointment'
  },
  {
    icon: 'OfficeBuilding',
    title: '医院简介',
    desc: '了解医院的历史、文化和特色科室',
    route: '/user/doctor-intro'
  },
  {
    icon: 'ChatDotRound',
    title: '问题反馈',
    desc: '有任何问题或建议，欢迎反馈',
    route: '/user/feedback'
  }
])

onMounted(() => {
  fetchCarousels()
  fetchNotices()
})

// 获取轮播图数据
const fetchCarousels = () => {
  carouselLoading.value = true
  
  listCarousel({ status: 'published' })
    .then(res => {
      if (res.code === 200) {
        carousels.value = res.data || []
        
        // 如果没有轮播图数据，添加默认数据
        if (carousels.value.length === 0) {
          carousels.value = [
            { id: 1, title: '欢迎来到医院管理系统', imageUrl: '' },
            { id: 2, title: '专业医疗服务', imageUrl: '' },
            { id: 3, title: '关爱您的健康', imageUrl: '' }
          ]
        }
      } else {
        ElMessage.error(res.msg || '获取轮播图失败')
      }
    })
    .catch(error => {
      console.error('获取轮播图失败', error)
      // 添加默认数据
      carousels.value = [
        { id: 1, title: '欢迎来到医院管理系统', imageUrl: '' },
        { id: 2, title: '专业医疗服务', imageUrl: '' },
        { id: 3, title: '关爱您的健康', imageUrl: '' }
      ]
    })
    .finally(() => {
      carouselLoading.value = false
    })
}

// 获取公告数据
const fetchNotices = () => {
  noticeLoading.value = true
  
  listNotice({ status: 'published', isTop: true })
    .then(res => {
      if (res.code === 200) {
        notices.value = res.data || []
        
        // 如果没有公告数据，添加默认数据
        if (notices.value.length === 0) {
          notices.value = [
            {
              id: 1,
              title: '医院门诊时间调整通知',
              publishTime: '2023-05-15',
              content: '自2023年6月1日起，我院门诊时间调整为上午8:00-12:00，下午13:30-17:30。'
            },
            {
              id: 2,
              title: '新冠疫苗接种通知',
              publishTime: '2023-05-10',
              content: '我院现开展新冠疫苗接种服务，请市民朋友们预约后前来接种。'
            },
            {
              id: 3,
              title: '医院系统升级通知',
              publishTime: '2023-05-05',
              content: '我院将于2023年5月20日进行系统升级，届时网上预约系统将暂停使用4小时。'
            }
          ]
        }
      } else {
        ElMessage.error(res.msg || '获取公告列表失败')
      }
    })
    .catch(error => {
      console.error('获取公告列表失败', error)
      // 添加默认数据
      notices.value = [
        {
          id: 1,
          title: '医院门诊时间调整通知',
          publishTime: '2023-05-15',
          content: '自2023年6月1日起，我院门诊时间调整为上午8:00-12:00，下午13:30-17:30。'
        },
        {
          id: 2,
          title: '新冠疫苗接种通知',
          publishTime: '2023-05-10',
          content: '我院现开展新冠疫苗接种服务，请市民朋友们预约后前来接种。'
        },
        {
          id: 3,
          title: '医院系统升级通知',
          publishTime: '2023-05-05',
          content: '我院将于2023年5月20日进行系统升级，届时网上预约系统将暂停使用4小时。'
        }
      ]
    })
    .finally(() => {
      noticeLoading.value = false
    })
}

// 查看公告详情
const viewNoticeDetail = (notice) => {
  getNotice(notice.id)
    .then(res => {
      if (res.code === 200) {
        currentNotice.value = res.data
        noticeDetailVisible.value = true
      } else {
        ElMessage.error(res.msg || '获取公告详情失败')
      }
    })
    .catch(error => {
      console.error('获取公告详情失败', error)
      // 如果获取详情失败，直接使用列表中的数据
      currentNotice.value = notice
      noticeDetailVisible.value = true
    })
}

const goToService = (route) => {
  router.push(route)
}
</script>

<style scoped>
.home-page {
  padding: 20px;
}

.carousel-item {
  height: 300px;
  background-color: #d3dce6;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #333;
}

.service-card {
  height: 250px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.service-icon {
  margin-bottom: 15px;
  color: #409eff;
}

.service-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.service-desc {
  color: #606266;
  margin-bottom: 15px;
}

.el-divider {
  margin: 30px 0;
}

.notice-content {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 400px;
}

.notice-detail {
  padding: 20px 0;
}

.notice-info {
  display: flex;
  justify-content: space-between;
  color: #909399;
  font-size: 14px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}

.notice-content-full {
  line-height: 1.8;
  white-space: pre-line;
}
</style> 